<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>管理后台</title>
    {% load staticfiles %}
    <link href="{% static "css/bootstrap.min.css" %}" rel="stylesheet">
    <style>
        .message{
            display: inline-block;
            margin: 0 0 20px;
            background:rgb(253, 253, 177);
            padding: 5px 10px;
            border-radius: 4px;
            color:green;
        }
        .header{
            padding: 30px 0;
        }
        .logout{margin-top:25px;}
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <div class="logout pull-right">
                <a href="/dashboard/" class="btn btn-default">管理首页</a>
                <a href="/dashboard/logout/" class="btn btn-info">退出</a>
            </div>
            <h1>管理后台</h1>
        </div>
        {% if messages %}
            {% for message in messages %}
                <div class="alert alert-warning" role="alert">{{message}}</div>
            {% endfor %}
        {% endif %}
        {% if message %}<div class="alert alert-success" role="alert">{{message}}</div>{% endif %}
        <table class="table table-striped">
            <tr>
                <th>ID</th>
                <th>姓名</th>
                <th>电话</th>
                <th>图片地址</th>
            </tr>
            {% for user in users %}
                <tr>
                    <td>{{user.id}}</td>
                    <td>{{user.name}}</td>
                    <td>{{user.phone}}</td>
                    <td><img src="{{user.picture_path}}" width="300" ></td>
                </tr>
            {% endfor %}
        </table>
        <nav>
          <ul class="pagination">
            {% if users.has_previous %}
                <li><a href="?page={{ contacts.previous_page_number }}">&laquo;</a></li>
            {% endif %}
            {% for page in users.paginator.page_range %}
                <li{% if users.number == page %} class="active"{% endif%}><a href="?page={{ page }}">{{ page }}</a></li>
            {% endfor %}
            {% if users.has_next %}
                <li><a href="?page={{ contacts.next_page_number }}">&raquo;</a></li>
            {% endif %}
          </ul>
        </nav>
    </div>
    <script>
        setTimeout(function(){
            var alertEl = document.getElementsByClassName('alert');
            if(!alertEl) return;
            for(var i=0,l=alertEl.length; i<l; i++){
                alertEl[i].style.display = 'none';
            }
        }, 3000);
    </script>
</body>
</html>